<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<!--
        	作者：肖静怡
        	时间：2018-09-29
        	描述：9.29作业
        -->
		<link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.css" />
		<title></title>
	</head>

	<body>
		<!--点击按钮三个盒子切换五种颜色-->
		<div id="div_bgcolor" style="background-color:sandybrown;width: 100%;height: 300px;">
			<div id="lg_div_bgcolor" style="background-color:lightblue;width: 50%;height: 200px;">
				<div id="sm_div_bgcolor" style="background-color:blueviolet;width: 25%;height: 100px;">

				</div>
			</div>
		</div>
		<button id="button" num="0" onclick="changecolor()">点击改变盒子背景色</button>

		<br /><br />

		<button onclick="get()">填写要改变的背景颜色</button>
		<div id="div_bgcolor1" style=" border:1px solid lightcoral;width: 50%;height: 150px;">
			第一个div
		</div>
		<div id="div_bgcolor2" style="border:1px solid lightcoral;width: 50%;height: 150px;">
			第二个div
		</div>
		<div id="div_bgcolor3" style="border:1px solid lightcoral;width: 50%;height: 150px;">
			第三个div
		</div>

		<br /><br />

		<!--点赞-->
		<i class="fa fa-thumbs-o-up fa-4x" num="1" aria-hidden="true" onclick="iColor(this)"></i>
		<span id="ts" style="display: none;"></span>

		<br /><br />

		<table id="myTable">
			<thead>
				<tr>
					<td>第一列</td>
					<td>第二列</td>
					<td>第三列</td>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>1-1</td>
					<td>1-2</td>
					<td>1-3</td>
				</tr>
				<tr>
					<td>1-1</td>
					<td>1-2</td>
					<td>1-3</td>
				</tr>
				<tr>
					<td>1-1</td>
					<td>1-2</td>
					<td>1-3</td>
				</tr>
				<tr>
					<td>1-1</td>
					<td>1-2</td>
					<td>1-3</td>
				</tr>
				<tr>
					<td>1-1</td>
					<td>1-2</td>
					<td>1-3</td>
				</tr>
			</tbody>
		</table>

		<br /><br /> 账号：

		<input type="text" name="account" id="account"><br /> 密码：
		<input type="password" name="password" id="password">
		<button onclick="loginchecked()">登录</button><br />
		<span id="text"></span>

		<br /><br /><br /><br /><br /><br /><br /><br />
		<script type="text/javascript">
			function loginchecked() {
				var account = document.getElementById("account");
				var password = document.getElementById("password");

				var accountstr = /^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/;
				var passwordStr = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/;
				if(account.value == "" || password.value == "") {
					document.getElementById("text").innerHTML = "账号和密码不能为空!";
				} else {
					if(accountstr.test(account.value)) {
						if(account.value == "15575938041") {
							if(passwordStr.test(password.value)) {
								if(password.value == "admin123") {
									window.location = "http://www.baidu.com";
								} else {
									document.getElementById("text").innerHTML = "密码输入错误!";
								}
							} else {
								document.getElementById("text").innerHTML = "密码不能小于6位，数字及字母混合!";
							}
						} else {
							document.getElementById("text").innerHTML = "账户输入错误!";
						}
					} else {
						document.getElementById("text").innerHTML = "您输入的账号格式不正确！";
					}
				}
			}

			//奇数行变颜色
			changeRow();

			function changeRow() {
				var trNum = document.getElementById("myTable").getElementsByTagName("tbody").item(0).getElementsByTagName("tr").length;
				for(var i = 0; i < trNum; i++) {
					if((i + 1) % 2 != 0) {
						var tr = document.getElementById("myTable").getElementsByTagName("tbody").item(0).getElementsByTagName("tr").item(i);
						tr.style.background = "lightgreen";
					} else {

					}
				}
			}

			//弹出三个输入框,改变div背景色
			function get() {
				var color = prompt('请输入第一个div要嵌入的颜色代码？', 'lightblue');
				div_bgcolor1.style.background = color;
				var color1 = prompt('请输入第二个div要嵌入的颜色代码？', 'lightgreen');
				div_bgcolor2.style.background = color1;
				var color2 = prompt('请输入第三个div要嵌入的颜色代码？', 'pink');
				div_bgcolor3.style.background = color2;
			}

			//点击按钮三个盒子切换五种颜色
			var num = 0;

			function changecolor() {
				var div_bgcolor = document.getElementById("div_bgcolor");
				var lg_div_bgcolor = document.getElementById("lg_div_bgcolor");
				var sm_div_bgcolor = document.getElementById("sm_div_bgcolor");
				console.log(num);
				var sz_color = ["#58B99D", "pink", "lightgreen", "lightblue", "lightyellow"];
				if(num > 4) {
					num = 0;
					div_bgcolor.style.background = sz_color[num];
					lg_div_bgcolor.style.background = sz_color[num + 1];
					sm_div_bgcolor.style.background = sz_color[num + 2];
					num++;
				} else {
					div_bgcolor.style.background = sz_color[num];
					if(num == 4 || num == 3) {

						if(num == 4) {
							lg_div_bgcolor.style.background = sz_color[0];
							sm_div_bgcolor.style.background = sz_color[1];
						} else {
							lg_div_bgcolor.style.background = sz_color[0];
							sm_div_bgcolor.style.background = sz_color[0];
						}

					}
					lg_div_bgcolor.style.background = sz_color[num + 1];
					sm_div_bgcolor.style.background = sz_color[num + 2];
					num++;
				}

			}

			//点赞
			function iColor(obj) {
				var num = obj.getAttribute("num");
				console.log(num);
				if(num % 2 != 0) {
					num++;
					obj.style.color = "red";
					obj.setAttribute("num", num);
					var aa = document.getElementById("ts").innerText = "取消点赞";
					document.getElementById("ts").style = aa;
				} else {
					num++;
					obj.style.color = "black";
					obj.setAttribute("num", num);
					var bb = document.getElementById("ts").innerText = "点赞";
					document.getElementById("ts").style = bb;
				}
			}
		</script>

	</body>

</html>